<template>
  <div class="login_container">
    <div class="textTil">峡江水利枢纽工程信息平台仓库管理模块</div>
    <div class="login_box">
      <div class="logofont3">欢迎来到登录页</div>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="0px"
        class="login_form"
      >
        <el-form-item prop="userName" style="margin-top:50px">
          <div class="input1">
            <el-input v-model="loginForm.userName" prefix-icon="el-icon-user" placeholder="请输入用户名" @keyup.enter.native="login"></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="input">
            <el-input
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
              @keyup.enter.native="login"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="btns">
            <el-button type="primary" @click="login" >登录</el-button>
          </div>
          <!-- <div class="btns1"> -->
          <!-- <el-button @click="$router.push('/register')">注册</el-button> -->
          <!-- </div> -->
          <div
            style="margin-top: -1px;margin-bottom: -21px; color: #409eff; font-size: 14px; text-align: center;"
          >Tip:推荐使用谷歌和火狐浏览器，最佳分辨率:1920x1080</div>
        </el-form-item>
      </el-form>
    </div>
    <div
      style="position: fixed;bottom: 26px;left: 50%;transform: translate(-50%);opacity: 0.6;font-size: 16px;color:#ffffff"
    >Copyright © 2020 江西省水利科学研究院 ｜ 江西鄱水信息科技有限公司</div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      //这是登陆表单的数据绑定对象
      loginForm: {
        userName: "",
        password: "",
      },
      //这是登陆表单的验证规则
      loginFormRules: {
        userName: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登陆密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ...mapActions("auth", ["setUser", "setLoggedIn"]),
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        console.log(this.loginForm)
        if (!valid) return;
        this.$http
          .post(
            encodeURI(`/restful/v1/dd/login/login?userName=${this.loginForm.userName}&password=${this.loginForm.password}`)
          )
          // .post("/restful/v1/dd/login", this.loginForm)
          .then((response) => {
            console.log(response);
            // 登陆会设置cookie   登陆成功的凭证是是否携带cookie
            if (response.data.code !== 1) {
              return this.$message.error("用户名或密码错误");
            }
            console.log("xxx", this.setUser);
            this.handleUser()
            this.setUser(response.data.object);
            this.setLoggedIn(true);
            this.$message({
              message: " 登陆成功",
              type: "success",
              duration: 500,
            });
            this.$router.push(`/home/welcome`);
          })
          .catch(function (error) {
            console.log(error);
          });
      });
    },
    async handleUser () {
      const res = await this.$http.get(`/restful/v1/dd/permit/getUserDetail?${Math.random()}`)
      // 判断用户身份，设置相应的权限
      const isShow = res.data.object.userRank
      localStorage.removeItem('isShow')
      localStorage.setItem('isShow', isShow)
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" >
.textTil {
  text-align: center;
  margin: 20px 70px;
  color: #ffffff;
  font-size: 42px;
  font-family: "微软雅黑";
  font-weight: bold;
  position: absolute;
  top: 5%;
  width: 100%;
}
.login_container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(../assets/timg6.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
}
.login_box {
  width: 440px;
  height: 440px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 40px;
  border: 1px solid #409eff;
  opacity: 0.96;
  position: relative;
  top: 50%;
  margin-top: -225px;
  left: 50%;
  margin-left: 125px;
}
.textTil1 {
  text-align: left;
  font-size: 15px;
  position: absolute;
  margin: 0 auto;
  line-height: 5px;
  margin-bottom: -45px;
  margin-left: -65px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 30px 30px;
  box-sizing: border-box;
  max-width: 500px;
}
.logo {
  width: 450px;
  height: 420px;
  background: linear-gradient(
    360deg,
    rgba(52, 130, 243, 0) 0%,
    rgba(52, 130, 243, 1) 100%
  );
  border-radius: 40px 40px 0px 0px;
  opacity: 0.8;
  position: absolute;
  margin-top: 30px;
  margin-left: 30px;
}
.logofont {
  width: 320px;
  height: 64px;
  font-size: 48px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 64px;
  text-shadow: 0px 2px 8px rgba(11, 83, 188, 1);
  position: absolute;
  margin-top: -75px;
  margin-left: 200px;
  letter-spacing: 8px;
}
.logofont1 {
  width: 560px;
  height: 40px;
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 40px;
  margin-top: 39px;
  margin-left: 80px;
  letter-spacing: 10px;
  position: absolute;
}
.logofont2 {
  width: 390px;
  height: 76px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 38px;
  position: absolute;
  margin-left: 80px;
  margin-top: 334px;
}
.logofont3 {
  width: 308px;
  height: 44px;
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #409eff;
  line-height: 44px;
  position: absolute;
  margin-top: 50px;
  margin-left: 120px;
}
.textTil2 {
  text-align: right;
  font-weight: bold;
  font-size: 15px;
}
.input1 {
  width: 310px !important;
  height: 68px !important;
  background-color: #f3f5fc !important;
  border-radius: 47px;
  position: relative;
  margin-left: 34px;
  margin-top: 10px;
  .el-input {
    margin-top: 13px;
  }
  .el-input__inner {
    -webkit-appearance: none;
    background-color: #f3f5fc;
    background-image: none;
    border-radius: 47px;
    border: 0px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 64px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 270px;
    margin-left: 35px;
    margin-top: -59px;
  }
  .el-input__icon {
    height: 100%;
    width: 40px;
    text-align: center;
    transition: all 0.3s;
    line-height: 50px;
    margin-left: 15px;
    margin-top: -28px;
  }
}
.input {
  width: 310px !important;
  height: 68px !important;
  background-color: #f3f5fc !important;
  border-radius: 47px;
  position: relative;
  margin-left: 34px;
  margin-top: 6px;
  .el-input {
    margin-top: 13px;
  }
  .el-input__inner {
    -webkit-appearance: none;
    background-color: #f3f5fc;
    background-image: none;
    border-radius: 47px;
    border: 0px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 64px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 270px;
    margin-left: 35px;
    margin-top: -59px;
  }
  .el-input__icon {
    height: 100%;
    width: 40px;
    text-align: center;
    transition: all 0.3s;
    line-height: 50px;
    margin-left: 15px;
    margin-top: -28px;
  }
}
.btns {
  text-align: center;
}
.btns button {
  width: 310px;
  height: 56px;
  background: rgba(52, 130, 243, 1);
  border-radius: 45px;
  font-size: 18px;
}
.btns1 {
  text-align: right;
  margin-top: -54px !important;
  margin-right: 42px;
}
.btns1 button {
  width: 100px;
  height: 56px;
  border-radius: 45px;
  border: 1px solid rgba(40, 86, 222, 1);
  font-size: 18px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(52, 130, 243, 1);
  line-height: 28px;
}
</style>
